import { Button, Checkbox, Popover, Switch, Tooltip } from 'antd'
import cs from 'classnames'

import Group9 from '@/assets/svg/Group9.svg'
import SquareEditOutline from '@/assets/svg/square-edit-outline.svg'
import styles from '@/pages/user/style/index.module.less'
const tableColumnsFilter = (
  t: any,
  tableColumns: any[],
  options: any[],
  onChange: (_: any) => void,
  resetTableColumns: () => void
) => (
  <>
    <Checkbox.Group
      style={{ display: 'flex', flexDirection: 'column' }}
      onChange={onChange}
      value={tableColumns}
      className={styles['filter-item']}
    >
      {options.map((a) => (
        <div className={cs('w-full h-9 flex items-center pl-4 pr-3')} key={a.value}>
          <Checkbox value={a.value} disabled={a.disabled}>
            {a.label}
          </Checkbox>
        </div>
      ))}
    </Checkbox.Group>
    <div className={cs('p-2 w-full flex', styles['filter-bottom'])}>
      <Button className={styles['reset']} onClick={resetTableColumns}>
        {t['form.reset']}
      </Button>
    </div>
  </>
)

export function getColumns(
  t: any,
  // eslint-disable-next-line no-unused-vars
  callback: (record: any, type: string) => Promise<void>,
  tableColumns: Array<unknown>,
  options: Array<any>,
  lang: string,
  onChange: (_: any) => void,
  resetTableColumns: () => void
) {
  const defaultColumns = options.filter((a) => tableColumns.includes(a.value))

  const customColumns: any[] = [
    {
      title: t['columns.roles'],
      dataIndex: 'admin',
      render: (a: any): JSX.Element => {
        return <>{a ? t['columns.roles.admin'] : t['columns.roles.common']}</>
      },
    },
    {
      title: t['columns.active'],
      dataIndex: 'active',
      render: (a: any, b: any): JSX.Element => {
        return <>{!b.admin && <Switch checked={a} onClick={() => callback(b, 'switch')} />}</>
      },
    },

    {
      title: (
        <div className=" flex items-center justify-between">
          {t['columns.actions']}
          <div className={cs('', lang === 'en-US' ? 'right-0' : 'left-0')}>
            <Popover
              placement="bottom"
              arrow={false}
              content={tableColumnsFilter(t, tableColumns, options, onChange, resetTableColumns)}
              trigger="hover"
            >
              <div className={cs(styles['filter'])}>
                <Group9 className={cs(' w-6 h-6', styles['icon'])} />
              </div>
            </Popover>
          </div>
        </div>
      ),
      dataIndex: 'actions',
      render: (_: any, b: any): JSX.Element => {
        return (
          <div className="h-full flex items-center">
            {!b.admin && (
              <Tooltip title={t['columns.actions.Modify']}>
                <SquareEditOutline
                  onClick={() => callback(b, 'edit')}
                  className={cs('w-[20px] h-[20px] cursor-pointer')}
                />
              </Tooltip>
            )}
          </div>
        )
      },
    },
  ]

  const columns = defaultColumns.map((a) => {
    const k = customColumns.findIndex((b) => b.dataIndex === a.value)
    return k === -1
      ? {
          ...{
            title: a.label,
            dataIndex: a.value,
          },
          ...(a.width ? { width: a.width } : {}),
        }
      : customColumns[k]
  })

  return columns
}
